<template>
	<view class="content">
		<view class="top">
			<view class="top_cont">
				<view class="topfl">{{title}}</view>
				<view class="topfr">{{startTime}}-{{endTime}}</view>
			</view>
		</view>
		<view class="group">
			<view class="group_top">
				<view class="list" v-for="(item,index) in list" :key="index" @click="goAution(item)">
					<view class="list_fl">
						<image class="list_pic" :src="item.yxAuctionProductDto.image" mode="aspectFill"></image>
						<image v-if="item.isBuy == 1" class="list_over" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/finished.png" mode=""></image>
					</view>
					<view class="list_fr">
						<view class="list_name ellipsis_2">{{item.yxAuctionProductDto.title}}</view>
						<view v-if="item.isMax == 1" class="iconfont listtip">&#xe6e1;拍下只能提货，不可以转拍</view>
						<view class="list_price">
							<view class="sign iconfont">&#xe604;</view>
							<view class="price">{{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 分页 -->
			<view class="group_bot" v-if="datas.pages > 1">
				<onion-pagination :page.sync="page" :pageSize="datas.size" :total="datas.total" @update:page="handleCurrent"></onion-pagination>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import api from "../../../../common/api/api.js"
	import OnionPagination from '../../../../components/onion-pagination/onion-pagination.vue'
	export default {
		components:{
			OnionPagination
		},
		data() {
			return { 
				page: 1,  // 当前页
				timeId:'',
				limit:10,
				datas:{},
				list:[],
				title:'',
				startTime:'',
				endTime:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.timeId = options.timeId;
			this.title = options.title;
			this.startTime = options.startTime;
			this.endTime = options.endTime;
			this.page = 1;
			this.getListInfo()
			let that = this;
			uni.$on('update',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				this.page = 1;
				that.getListInfo()
			})
			
		},
		onUnload() {
			uni.$off('update');
		},
		methods: {
			// 选中页数
			handleCurrent: function (val) {
				this.list = [];
				this.page = val;
				console.log(val)
				this.getListInfo();
			},
			// 拍卖详情页
			goAution: function (item) {
				uni.navigateTo({
					url: `../auctionDetail/auctionDetail?id=${item.id}&startTime=${this.startTime}&endTime=${this.endTime}`
				});
			},
			// 获取列表
			getListInfo: function () {
				api.homeListMore(this.timeId,{
					page:this.page,
					limit:this.limit
				}).then(res => {
					console.log(res,"---------")
					this.datas = res.data;
					this.list = res.data.records
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 28rpx;
		color: #212121;
		font-family: 'PingFang SC';   
		background: #FFFFFF;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.top {
		width: 100%;
		box-sizing: border-box;
		background: #E42221;
		padding: 20rpx 20rpx 40rpx 20rpx;
		.top_cont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			.topfr {
				font-size: 24rpx;
			}
		}
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		position: relative;
		top: -20rpx;
		left: 0;
		.group_top {
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			padding-bottom: 130rpx;
			.list {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				justify-content: flex-start;
				// align-items: center;
				.list_fl {
					width: 190rpx;
					height: 190rpx;
					position: relative;
					.list_pic {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
					.list_over {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 10;
					}
				}
				.list_fr {
					width: calc(100% - 190rpx);
					box-sizing: border-box;
					padding-left: 30rpx;
					display:flex;
					flex-flow: column; //垂直排列
					justify-content: space-between;//两端对齐
					.list_price {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 36rpx;
						color: #E42221;
						.sign {
							font-size: 32rpx;
							color: #FFDA71;
						}
					}
					.listtip {
						width: 100%;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: 600;
						color: #E42221;
					}
				}
			}
			
		}
		
		.group_bot {
			width: 100%;
			box-sizing: border-box;
			// padding-left: 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			background: #FFFFFF;
			padding: 15rpx 0;
			text-align: center;
		}
		
		
		
	}

</style>
